<template>
	<view class="page">
		<view class="top-words">
			<view class="title">
				本单元单词
			</view>
			<view class="words">
				<text v-for="(item,index) in words">
					{{item.word}}
				</text>
			</view>
		</view>
		<button class="study-btn" @click="tn('/pages/word/study',1)">继续学习</button>
		<view class="menu-cards">
			<view class="card-item tn-cool-bg-color-5" @click="tn('/pages/word/word',2)">
				<text>单词记词义</text>
				<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/蛋糕01.png"
					class="img-cover"></image>
			</view>
			<view class="card-item tn-cool-bg-color-6" @click="tn('/pages/word/word',3)">
				<text>词义记单词</text>
				<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/颜料.png"
					class="img-cover"></image>

			</view>
			<view class="card-item tn-cool-bg-color-7" @click="tn('/pages/word/word',4)">
				<text>单词英文定义</text>
				<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/罐装汽水.png"
					class="img-cover"></image>
			</view>
			<view class="card-item tn-cool-bg-color-8" @click="tn('/pages/word/fill',5)">
				<text>完形填空</text>
				<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/蛋糕02.png"
					class="img-cover"></image>

			</view>
			<view class="card-item tn-cool-bg-color-9" @click="tn('/pages/word/listening',6)">
				<text>听力测试</text>
				<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/蛋糕03.png"
					class="img-cover"></image>

			</view>
			<view class="card-item tn-cool-bg-color-10" @click="tn('/pages/word/spell',7)">
				<text>听力拼写</text>
				<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/2个冰淇淋.png"
					class="img-cover"></image>

			</view>
			<view class="card-item tn-cool-bg-color-11" @click="tn('/pages/word/spell',8)">
				<text>翻译拼写</text>
				<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/煎饼02.png"
					class="img-cover"></image>

			</view>
			<view class="card-item tn-cool-bg-color-12" @click="tn('/pages/word/test',9)">
				<text>课后练习</text>
				<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/蛋糕02.png"
					class="img-cover"></image>

			</view>
			<!-- <view :class="['card-item', `tn-cool-bg-color-${index+13}`]" v-for="(item,index) in chapter.moreContent"
				@click="openSelector(item.file)">
				<text>{{item.name}}</text>
			</view> -->
		</view>
		<tn-picker mode="selector" v-model="showSelector" :defaultSelector="[0]" :range="selector" @confirm="confirmPicker"></tn-picker>
		<tn-popup v-model="videoShow">
			<video :src="videoSrc" style="width: 100%;height: 300px;"></video>
		</tn-popup>
	</view>
</template>
<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	const pageDataCenter = uniCloud.importObject('page-data-center')
	export default {
		name: 'TemplateProduct',
		mixins: [template_page_mixin],
		data() {
			return {
				videoSrc: '',
				id: '',
				chapter: {
					chapter:[]
				},
				words: [],
				videoShow: false,
				videoSrc: '',
				showSelector:false,
				selector: [1, 2, 3],
				selectorFile:[],
			}
		},
		onLoad(option) {
			this.getData(option.id)
			this.getChapter(option.id)
		},
		methods: {
			getChapter(id) {
				pageDataCenter.getChapterDetail(id).then((res) => {
					console.log(res)
					this.chapter = res.data[0]
				})
			},
			getData(id) {
				this.id = id
				pageDataCenter.getChapterStudyWords(id).then((res) => {
					console.log(res)
					this.words = res.data
				})
			},
			// 跳转
			tn(e, type) {
				uni.navigateTo({
					url: e + '?id=' + this.id + `&type=${type}`,
				});
			},
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			getRandomCoolBg() {
				return this.$t.colorUtils.getRandomCoolBgClass()
			},
			goBack() {
				uni.navigateBack()
			},
			openVideo(src) {
				this.videoSrc = src
				this.videoShow = true
			},
			openSelector(file) {
				this.selectorFile = file
				if (file.length > 1) {
					this.selector = file.map((item) => item.name)
					this.showSelector = true
				} else {
					file[0]['extname'] == 'mp4' && this.openVideo(file[0])
					file[0]['extname'] == 'pdf' && this.open(file[0])
				}
			},
			confirmPicker(e) {
				let file = this.selectorFile[e]
				this.open(file)
			},
			// cardSwiper
			open(e) {
				uni.showLoading()
				e.extname == 'pdf' && uni.downloadFile({
					url: e.path,
					success: function(res) {
						uni.hideLoading()
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
				e.extname == 'mp4' && this.openVideo(e.path)
			},
		}
	}
</script>

<style scoped>
	.page {
		background-color: #eee;
		height: 100vh;
		padding: 20px;
		overflow-y: scroll;
	}

	.top-words {
		background-color: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	.words {
		margin-top: 15px;
		display: flex;
		flex-wrap: wrap;
	}

	.words text {
		font-weight: 700;
		margin: 0 5px;
		color: #666;
		font-size: 16px;
	}

	.title {
		font-size: 18px;
		text-align: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #f1f1f1;
	}

	.study-btn {
		margin: 25px 0;
		background-color: #23d447;
		color: #fff;
	}

	.menu-cards {
		display: flex;
		flex-wrap: wrap;

	}

	.card-item {
		width: 48%;
		margin-bottom: 15px;
		background-color: #ddd;
		height: 80px;
		position: relative;
		overflow: hidden;
		border-radius: 6px;
	}

	.card-item:nth-child(even) {
		margin-left: 2%;
	}

	.card-item:nth-child(odd) {
		margin-right: 2%;
	}

	.card-item text {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 99;
		color: #fff;
	}

	.img-cover {
		width: 80%;
		height: 100%;
		margin-top: 20px;
		margin-left: 40px;
	}
</style>